import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 自动引入
import AutoImport from 'unplugin-auto-import/vite'
// 代码压缩
import viteCompression from "vite-plugin-compression";
// Electron
import Electron from 'vite-plugin-electron'
// px自适应
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'
// svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
	base:'./',
	plugins: [
		vue(),
		viteCompression(),
		AutoImport({
			dts: true,
			imports:[
				'vue',
				'vue-router',
			],
		}),
		Electron({
			entry: 'electron/main.js'
		}),
		createSvgIconsPlugin({
			// 需要自动导入的 svg 文件目录 (可自行修改)我的路径如下图所示
			iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
			// 执行icon name的格式 (可自行修改)
			symbolId: 'icon-[dir]-[name]',
		}),
	],
	server: {
		port: 8888,
		cors: true, // 允许跨域
		hmr: true, // 开启热更新
	},
	resolve: {
		alias: {
			'@': '/src',
		},
	},
	css: {
		preprocessorOptions: {
			scss: {
				// 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
				additionalData: '@import "@/style/mixin.scss";'
			  }
		},
		postcss: {
			plugins: [
			  postcsspxtoviewport8plugin({
				unitToConvert: 'px',
				viewportWidth: 200, // 设计稿宽度
				unitPrecision: 5, // 单位转换后保留的精度
				propList: ['*'], // 能转化为vw的属性列表
				viewportUnit: 'vw', // 希望使用的视口单位
				fontViewportUnit: 'vw', // 字体使用的视口单位
				selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
				minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
				mediaQuery: true, // 媒体查询里的单位是否需要转换单位
				replace: true, //  是否直接更换属性值，而不添加备用属性
				exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
				include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
				landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
				landscapeUnit: 'vw', // 横屏时使用的单位
				landscapeWidth: 1628, // 横屏时使用的视口宽度
			  }),
			],
		},
	},
})
